<template>
  <view>
    <topBackGround :backisShow="1" :banner="2"></topBackGround>
    <div class="title">第三步：配对设备</div>
    <view class="container">
        <view>
            <text class="title_tips">选择要配对的毛笔，点击去连接</text>
            <view class="pen_content">
                <penList 
                  :penData="penListData" 
                  @connect="connectPen" 
                  ></penList>
                <text class="no_more"> - 没有更多了 -</text>
            </view>
        </view>
    </view>
  </view>
</template>
    
  <script setup>
  import Taro from '@tarojs/taro';
  import penList from '../../components/penList.vue';
  import topBackGround from '../../../src/components/backGround.vue'
  import { ref } from 'vue'
  import { getCurrentInstance } from 'vue';
  const instance = getCurrentInstance();
  instance.appContext.config.globalProperties.$loadFontFace()

  const userId = Taro.getStorageSync('userId');
  const userToken = Taro.getStorageSync('token');


  function connectPen(item) {
    console.log(item)
    Taro.navigateTo({
      // 往下一个页面带参数
      url: `/pages/linkwifi/index?info=${encodeURIComponent(JSON.stringify(item))}`,
    })
  }
  </script>
  
  <style>
  .no_more{
    color: #C3B3A0;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  
  </style>